<template>
  <!-- 首页 -->
  <el-container>
    <el-header height="80px" style="background-color: white">
      <div style="width: 1200px;margin: 0 auto">
        <el-row :gutter="20" style="overflow: hidden">
          <el-col :span="4">
            <router-link to="/">
              <img src="/imgs/icon.png" style="width: 180px">
            </router-link>
          </el-col>
          <el-col :span="4" style="text-align: center;line-height: 60px">甬城动后台系统</el-col>
          <el-col :span="12">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                active-text-color="orange"
            >
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">会员</el-menu-item>
              <el-menu-item index="3" @click="router.push('counter')">柜机</el-menu-item>
              <el-menu-item index="4">包裹</el-menu-item>
              <el-menu-item index="5">活动</el-menu-item>
              <el-menu-item index="6">财务</el-menu-item>
              <el-menu-item index="7">其他</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4">
            <el-icon style="position: relative;top: 15px" :size="30">
              <User/>
            </el-icon>
            超级管理员
          </el-col>

        </el-row>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <el-card style="height: 100%; background-color: #2A323D">
          <!--menu里面添加router 结合菜单项中的index属性实现页面跳转功能-->
          <el-menu
              default-active="2"
              active-text-color="#ffd04b"
              background-color="#2A323D"
              text-color="#CCCCCC"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="1">
              <el-icon>
                <Operation/>
              </el-icon>
              <span>系统首页</span>
            </el-menu-item>
            <el-menu-item index="2">
              <template #title>
                <el-icon>
                  <UserFilled/>
                </el-icon>
                <span>会员管理</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Cellphone/>
                </el-icon>
                <span>柜机管理</span>
              </template>
              <el-menu-item-group>
                <el-sub-menu index="1-1">
                  <template #title>
                    <span @click="router.push('/counter/machine')">柜机列表</span>
                  </template>
                  <el-menu-item index="1-4-1" @click="router.push('/counter/add')">添加修改柜机</el-menu-item>
                  <el-menu-item index="1-4-2" @click="router.push('/counter/list')">批量添加柜机</el-menu-item>
                  <el-menu-item index="1-4-3" @click="router.push('/counter/box')">箱格列表</el-menu-item>
                  <el-menu-item index="1-4-4" @click="router.push('/counter/update')">修改箱格</el-menu-item>
                  <el-menu-item index="1-4-5" @click="router.push('/counter/detail')">箱格详情</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="1-2">租用列表</el-menu-item>
                <el-menu-item index="1-3">租用审核</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="4">
              <template #title>
                <el-icon>
                  <Box/>
                </el-icon>
                <span>包裹管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5">
              <template #title>
                <el-icon>
                  <ShoppingTrolley/>
                </el-icon>
                <span>活动管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="6">
              <template #title>
                <el-icon>
                  <CreditCard/>
                </el-icon>
                <span>财务管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="7">
              <template #title>
                <el-icon>
                  <Setting/>
                </el-icon>
                <span>其他设置</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import router from "@/router";

</script>
<style>
</style>